<template>
    <div class="cart">
        <div class="top-bar">
            <div class="left">
                <i class="iconfont icon-left" @click="goBack()"></i>
            </div>
            <div class="seach">购物车({{ Object.keys(cartList).length }})</div>

            <div class="right">
                <div>编辑</div>
                <i class="iconfont icon-message"></i>
            </div>
        </div>
        <div class="sell-list" ref="cartList">
            <div>
                <div class="item" v-for="(p, index) in cartList" :key="index" @click="gotoDetail(p)">
                    <div class="box" @click.stop>
                        <input type="checkbox" :id="'check'+index" v-model="p.choose" @change="checkAll()">
                        <label :for="'check'+index"></label>
                    </div>
                    <div class="img" @click.stop>
                        <img :src="p.img" alt="">
                    </div>
                    <div class="info" @click.stop>
                        <div class="desc">{{ p.title }}</div>
                        <div class="spec">商铺:{{ p.shopSeller|| '无' }}</div>
                        <div class="sum">
                            <span class="new">￥{{ p.price }}</span>
                            <span class="old">￥{{ p.orgPrice }}</span>
                            <span class="num">x{{ p.count}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-bar">
            <div class="box">
                <input type="checkbox" id="chooseAll" v-model="chooseAll" @change="changeChoose()">
                <label for="chooseAll"></label>
            </div>
            <div class="sell">
                <div class="sum">
                    <span>全选({{ count }})</span>
                    <span>￥{{ countPrice }}</span>
                </div>
                <div class="sell-btn">
                    <input type="button" value="去结算">
                </div>
            </div>
        </div>
        <fiexd-menus></fiexd-menus>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import FiexdMenus from "../components/FiexdMenus";
import { mapState, mapActions } from "vuex";
export default {
    name: "cart",
    components: {
        FiexdMenus
    },
    data() {
        return {
            chooseAll: false,
            count: 0,
            countPrice: 0
        };
    },
    computed: {
        ...mapState(["cartList"])
    },
    methods: {
        initScroll() {
            if (this.$sc) {
                this.$sc.refresh();
            } else {
                // 因为BS本身问题，直接在mounted构建无法读取DOM元素
                // 建议在 构建对象时 使用 40ms 延迟
                setTimeout(() => {
                    this.$sc = new BScroll(this.$refs.cartList, {
                        click: true
                    });
                }, 40);
            }
        },
        checkAll() {
            this.chooseAll = true;
            for (const key in this.cartList) {
                if (!this.cartList[key].choose) {
                    this.chooseAll = false;
                }
            }
            this.countSum();
        },
        changeChoose() {
            for (const key in this.cartList) {
                this.$set(this.cartList[key], "choose", this.chooseAll);
            }
            this.countSum();
        },
        countSum() {
            this.count = 0;
            this.countPrice = 0;
            for (const key in this.cartList) {
                if (this.cartList[key].choose) {
                    this.count += 1;
                    this.countPrice +=
                        this.cartList[key].price * this.cartList[key].count;
                }
            }
        },
        goBack() {
            this.$router.back();
        },
        gotoDetail(prod) {
            localStorage.setItem(prod.tradeItemId, JSON.stringify(prod));
            this.$router.push({
                name: "detail",
                params: {
                    iid: prod.tradeItemId
                }
            });
        }
    },
    mounted() {
        this.initScroll();
    }
};
</script>

<style lang="less" scoped>
.cart {
    height: 100%;
    background-color: white;
    .top-bar {
        position: absolute;
        top: 0px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid @cc;
        height: @h;
        line-height: @h;
        display: flex;
        flex-flow: row nowrap;
        background-color: white;
        z-index: 99;
        .left {
            width: @h;
        }
        .right {
            width: @h * 1.5;
            div {
                display: inline-block;
                vertical-align: middle;
                margin-right: 20px;
                font-size: 28px;
            }
            i {
                vertical-align: middle;
                color: @99;
            }
        }
        .left,
        .right {
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            font-size: 0px;
            i {
                font-size: 40px;
            }
        }
        .seach {
            flex-grow: 1;
            box-sizing: border-box;
            text-align: center;
            font-size: 36px;
        }
    }
    .sell-list {
        position: absolute;
        top: @h;
        bottom: @h;
        width: 100%;
        .item {
            display: flex;
            flex-flow: row nowrap;
            height: 230px;
            line-height: 200px;
            border-bottom: 1px solid @cc;
            .img {
                height: 100%;
                width: 220px;
                margin: 0px 10px;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    object-position: center;
                    padding: 10px;
                    box-sizing: border-box;
                }
            }
            .info {
                line-height: 36px;
                font-size: 26px;
                width: 100%;
                margin: 10px;
                .desc {
                    height: 36px * 3;
                    font-weight: 500;
                    color: @font;
                }
                .spec {
                    margin-top: 10px;
                    color: @99;
                }
                .sum {
                    margin-top: 10px;
                    font-size: 30px;
                    .new {
                        font-weight: 800;
                        margin-right: 10px;
                    }
                    .old {
                        font-size: 24px;
                        text-decoration: line-through;
                        color: @99;
                    }
                    .num {
                        float: right;
                        margin-right: 30px;
                        color: @66;
                    }
                }
            }
        }
    }
    .bottom-bar {
        position: absolute;
        bottom: 0px;
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid @cc;
        height: @h;
        line-height: @h;
        display: flex;
        flex-flow: row nowrap;
        display: flex;
        flex-flow: row nowrap;
        background-color: white;
        .sell {
            flex-grow: 1;
            .sum {
                font-size: 28px;
                color: @66;
                display: inline-block;
                span:last-child {
                    margin-left: 20px;
                    color: @pink;
                }
            }
            .sell-btn {
                float: right;
                margin-right: 40px;
                font-size: 0px;
                input[type="button"] {
                    font-size: 30px;
                    color: white;
                    background-color: @pink;
                    border: none;
                    padding: 10px 50px;
                    border-radius: 8px;
                    vertical-align: middle;
                }
            }
        }
    }
    .box {
        font-size: 0px;
        width: 60px;
        margin-left: 20px;
        text-align: center;
        input[type="checkbox"] {
            display: none;
        }
        label {
            background-image: url("../assets/checkbox.png");
            display: inline-block;
            width: 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position-y: -50px;
            vertical-align: middle;
        }
        // 当文本框被选中时执行的样式
        input[type="checkbox"]:checked + label {
            background-position-y: 0px;
        }
    }
}
</style>

